<script setup lang="ts">
import {onMounted, Ref, ref, UnwrapRef} from "vue";
import {appWindow} from '@tauri-apps/api/window'
// import { invoke } from "@tauri-apps/api/tauri";
import {RefreshLeft} from '@element-plus/icons-vue';


let percentage2: Ref<UnwrapRef<number>, UnwrapRef<number> | number> = ref(0)
let minsecString: Ref<UnwrapRef<string>, UnwrapRef<string> | string> = ref("")
let globalIntervalId: Ref<UnwrapRef<any>, UnwrapRef<any> | any> = ref();
let totalSeconds: Ref<UnwrapRef<number>, UnwrapRef<number> | number> = ref(1500);
let surTotalSeconds: Ref<UnwrapRef<number>, UnwrapRef<number> | number> = ref(1500);
let currSeconds: Ref<UnwrapRef<number>, UnwrapRef<number> | number> = ref(0);

const colors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#1989fa', percentage: 60},
  {color: '#6f7ad3', percentage: 80},
  {color: '#5cb87a', percentage: 100},
]


// 一个计算属性 ref
// const publishedBooksMessage = computed(() => {
//   return author.books.length > 0 ? 'Yes' : 'No'
// })


const initminsecStringDefaultValue = () => {
  const minutes = Math.floor(totalSeconds.value / 60);
  const seconds = totalSeconds.value % 60;
  minsecString.value = `剩余时间:${minutes}分${seconds}秒`;
}

const initDefaultValue = () => {
  currSeconds.value = 0;
  percentage2.value = 0;
  surTotalSeconds.value = totalSeconds.value;
  minsecString.value = "";
}

const initDefaultValueAndCleanInterval = () => {
  initDefaultValue();
  initminsecStringDefaultValue();

  if (globalIntervalId.value !== undefined) {
    clearInterval(globalIntervalId.value);
    globalIntervalId.value = undefined;
    return;
  }
}

const startOrPause = () => {

  if (globalIntervalId.value !== undefined) {
    clearInterval(globalIntervalId.value);
    globalIntervalId.value = undefined;
    return;
  }

  if (currSeconds.value >= totalSeconds.value) {
    initDefaultValue();
  }

  globalIntervalId.value = setInterval(() => {

    // let number = (percentage2.value % 101) + 1;
    let number = Math.floor((currSeconds.value / totalSeconds.value) * 100);
    // console.log("百分比:------------------" + number)
    // console.log("当前:------------------" + currSeconds.value)

    const minutes = Math.floor(surTotalSeconds.value / 60);
    const seconds = surTotalSeconds.value % 60;
    minsecString.value = `剩余时间:${minutes}分${seconds}秒`;
    if (surTotalSeconds.value > 0) {
      surTotalSeconds.value--;
    }


    if (currSeconds.value > totalSeconds.value) {
      // number = 0;
      // console.log("结束了")
      clearInterval(globalIntervalId.value);
      globalIntervalId.value = undefined;
    }

    currSeconds.value = currSeconds.value + 1;
    percentage2.value = number;

  }, 1000);
}

onMounted(() => {

  // setInterval(() => {
  //   percentage2.value = (percentage2.value % 100) + 10
  // }, 500);

  initminsecStringDefaultValue();

  const windowGlo = window as any;

  // if (windo_ &&  window.document) {
  windowGlo.document
      .getElementById('titlebar-minimize')
      .addEventListener('click', () => appWindow.minimize());
  // document
  //     .getElementById('titlebar-maximize')
  //     .addEventListener('click', () => appWindow.toggleMaximize());
  windowGlo.document
      .getElementById('titlebar-close')
      .addEventListener('click', () => appWindow.close());
  // }
})

// async function greet() {
//   // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
//   greetMsg.value = await invoke("greet", { name: name.value });
// }
</script>

<template>
  <div data-tauri-drag-region class="titlebar">
    <div class="titlebar-button" id="titlebar-minimize">
      <img
          src="https://api.iconify.design/mdi:window-minimize.svg"
          alt="minimize"
      />
    </div>
    <!--    <div class="titlebar-button" id="titlebar-maximize">-->
    <!--      <img-->
    <!--          src="https://api.iconify.design/mdi:window-maximize.svg"-->
    <!--          alt="maximize"-->
    <!--      />-->
    <!--    </div>-->
    <div class="titlebar-button" id="titlebar-close">
      <img src="https://api.iconify.design/mdi:close.svg" alt="close"/>
    </div>
  </div>

<!--  <p style="margin-bottom: 0;font-size: 20px;font-weight: bold">番茄时钟</p>-->
  <el-text class="mx-5" style="margin-bottom: 0;font-size: 20px;font-weight: bold"  >番茄时钟</el-text>
  <div class="demo-progress">


    <!--    <el-progress type="dashboard" :percentage="percentage" :color="colors" />-->
    <el-progress type="circle" :percentage="percentage2" :color="colors" size="large" width="270" stroke-width="10"
                 indeterminate>
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">{{ minsecString }}</span>

        <!--        <el-tooltip :content="globalIntervalId === undefined ? '开始':'暂停'" placement="left" effect="light">-->
        <el-button style="margin-top: 30px" @click="startOrPause" size="large" circle>
          <svg v-if="globalIntervalId === undefined" t="1731759509760" class="icon" viewBox="0 0 1024 1024"
               version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6231" width="13" height="13">
            <path
                d="M817.088 484.96l-512-323.744C295.232 154.976 282.752 154.592 272.576 160.224 262.336 165.856 256 176.608 256 188.256l0 647.328c0 11.648 6.336 22.4 16.576 28.032 4.8 2.656 10.112 3.968 15.424 3.968 5.952 0 11.904-1.664 17.088-4.928l512-323.616C826.368 533.184 832 522.976 832 512 832 501.024 826.368 490.816 817.088 484.96z"
                fill="#2c2c2c" p-id="6232"></path>
          </svg>
          <svg v-else t="1731760501153" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="6448" width="15" height="15">
            <path
                d="M352 768c-17.664 0-32-14.304-32-32L320 288c0-17.664 14.336-32 32-32s32 14.336 32 32l0 448C384 753.696 369.664 768 352 768z"
                fill="#2c2c2c" p-id="6449"></path>
            <path
                d="M672 768c-17.696 0-32-14.304-32-32L640 288c0-17.664 14.304-32 32-32s32 14.336 32 32l0 448C704 753.696 689.696 768 672 768z"
                fill="#2c2c2c" p-id="6450"></path>
          </svg>
        </el-button>
        <!--        </el-tooltip>-->

        <!--        <el-tooltip content="重置" placement="right" effect="light">-->

        <el-button style="margin-top: 30px" @click="initDefaultValueAndCleanInterval" size="large" :icon="RefreshLeft"
                   circle>

        </el-button>
        <!--        </el-tooltip>-->
      </template>

    </el-progress>
  </div>


</template>


<style scoped>

.titlebar {
  height: 40px;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  padding-top: 5px;
}

.titlebar-button:hover {
  background: #706d6d;
}

.demo-progress {
  margin-top: 40px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}

.demo-progress .el-progress--circle {
  margin-right: 0;

}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>